<style>
.datePicker1 {
  position: absolute;
  right: 5%;
  top: 2%;
  z-index: 10;
}
</style>

<template>
  <div class="datePicker1">
    <el-date-picker 
    v-model="date" align="right" type="date" placeholder="选择日期" 
    :picker-options="pickerOptions" 
    @change="selectDate()"
    :default-value="sendMaxDateToPicker||maxDate"
    >
    </el-date-picker>
  </div>
</template>
<script>
import Vue from 'vue';
import { DatePicker } from 'element-ui';
Vue.use(DatePicker);
export default {
  data() {
    return {
      maxDate:new Date(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() ;
        }
      },
      date: '',
    };
  },
  mounted:function(){
    this.setMaxDate();
  },
  methods: {
    selectDate() {
      if (this.date){
        this.$emit("pick", this.date)
      }
    },
    setMaxDate(){
      var _this = this
      this.pickerOptions= {
          disabledDate(time) {
           
            //  &&
               return     time.getTime() < +new Date(_this.sendMaxDateToPicker) -31*86700000 || time.getTime() > +new Date(_this.sendMaxDateToPicker) 
            ;
          }
        }
    }
  },
  props:{
    sendMaxDateToPicker:null
  },
  watch:{
    sendMaxDateToPicker:{
      handler(){
        this.maxDate = this.sendMaxDateToPicker
      }
    }
  }
};
</script>